<template>
	<view>
		<view class="submit">
			<view class="submit-chat">
				<view class="bt-img" @click="record" >
					<view v-if='!isrecord'>
						<image src="../static/mkf.png" mode=""></image>
					</view>
					<view v-else>
						<image src="../static/jp.png" mode=""></image> 
					</view>
				</view>
				<textarea v-model="msgs" @input="inputs" @focus="focus" class="but" value="" :class="{displaynone:isrecord}" auto-height="true" placeholder="" />
				<view @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove" class="record but" :class="{displaynone:!isrecord}"  >请按住说活</view>
				<view class="bt-img" @click="emoji">
					<image src="../static/bq.png" mode=""></image>
				</view>
				<view class="bt-img" @click="morefunc">
					<image src="../static/add.png" mode=""></image>
				</view>
			</view>
			<view class="emoji" :class="{displaynone:isemoji}">
				<view class="emoji-send">
					<view @tap="emojidelete" class="send-det">
						<image src="../static/delete.png" mode=""></image>
					</view>
					<view @tap='emojiSend' class="send">发送</view>
				</view>
				<emoji @emojis='emojis' :height='260' ></emoji>
			</view>
			<view class="more" :class="{displaynone:ismore}">
				<view class="more-list">
					<image src="../static/img.png" @click="sendIng('album')" mode=""></image>
					<view class="more-list-title">
						图片
					</view>
				</view>
				<view class="more-list">
					<image src="../static/xj.png" @click="sendIng('camera')"  mode=""></image>
					<view class="more-list-title">
						拍照
					</view>
				</view>
				<view class="more-list">
					<image src="../static/lx.png" mode=""></image>
					<view class="more-list-title">
						视频
					</view>
				</view>
				<view class="more-list" @tap="chooselocation" >
					<image src="../static/wz.png" mode=""></image>
					<view class="more-list-title">
						定位
					</view>
				</view>
				<view class="more-list">
					<image src="../static/files.png" mode=""></image>
					<view class="more-list-title">
						文件
					</view>
				</view>
			</view>
		</view>
		<view class="vioce-bg" :class="{displaynone:vioceBg}">
			<view class="vioce-bg-len">
				<view class="vioce-bg-tiem" :style="{width:20+record_time/0.75+'%'}" >
					{{ record_time }}
				</view>
			</view>
			\<view class="vioce-bg-del">上滑取消录音</view>
		</view>
	</view>
</template>

<script>
	import request,{BasicUrl} from '../utails/request.js'
	import emoji from './emoji/emoji.vue'
	const recorderManager = uni.getRecorderManager() // 录音
	// const innerAudioContext = uni.createInnerAudioContext()
	
	export default {
		name:"submit",
		data() {
			return {
				msgs:'', // 输入内容
				isrecord:false, // 语音切换
				isemoji:true ,// 表情
				ismore:true ,// 更多
				timer:'', //语音计时器 
				record_time:0, // 录音时长
				vioceBg:true ,// 语音输入界面
				pageY:0,// 点击录音时的初始y坐标
			};
		},
		props:{
			userinfo:{
				type:Object,
				default:{}
			},
			frendid:{
				type:Number,
				default:0
			},
			groupId:{
				type:Number,
				default:0
			}
		},
		comments:{
			emoji
		},
		methods:{
			
			// 语音
			record(){
				if(this.isrecord){
					this.isrecord = false
					
				}else{
					this.isrecord = true
					this.isemoji = true // 关闭表情
					this.ismore = true // 关闭更多
					setTimeout(()=>{
						this.getElementStyle()
					},10)
				}
			
				
			},
			// 表情
			emoji(){
				this.isemoji = !this.isemoji
				this.ismore = true
				this.isrecord = false // 关闭语音
				setTimeout(()=>{
					this.getElementStyle()
				},10)
			},
			// 点击表情
			emojis(e){
				this.msgs += e
			},
			// 监听内容输入 提交内容
			inputs(e){
				let data = e.detail.value
				let pos = data.indexOf('\n') // 匹配不到 返回-1
				if(pos!=-1 && data.length>=2){
					// 发送消息
					this.send(data, 0)
				}
			},
			// 发送表情
			emojiSend(e){
				if(this.msgs.length>=1){
					// 发送数据
					this.send(this.msgs, 0)
				}
			},
			// 删除表情
			emojidelete(){
				if(this.msgs.length>=1){
					this.msgs = this.msgs.substring(0,this.msgs.length-1)
				}
			},
			// 发送表情, 文件时输入文字
			focus(){
				this.isemoji = true
				this.ismore = true
				setTimeout(()=>{
					this.getElementStyle()
				},10)
			},
			
			// 更多功能
			morefunc(){
				this.ismore = !this.ismore
				this.isemoji = true
				this.isrecord = false // 关闭语音
				setTimeout(()=>{
					this.getElementStyle()
				},10)
			},
			
			// 发送
			send(message, types){
				let data = {
					message,
					types
				}
				// 发送数据
				this.$emit('inputs', data)
				setTimeout(()=>{
					this.msgs = ''
				},0)
			},
			
			// 图片发送
			sendIng(e){
				let count = 9
				if(e == 'album'){
					count = 9
				}else{
					count = 1
				}
				uni.chooseImage({
				    count: count, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=> {
				        const imgPaths = res.tempFilePaths
						const imgFile = res.tempFiles
						let url = ''
						let viewid = 0
						if(this.groupId){
							url =  BasicUrl + "/groupchatimg/"
							viewid = this.groupId
						}else{
							url = BasicUrl + "/chatpushimg/"
							viewid = this.frendid
						}
						imgPaths.forEach(v=>{
							// this.send(v, 1)
							uni.uploadFile({
								url: url,
								filePath: v,
								name: "file",
								fileType: "image",
								formData:{
									userid:this.userinfo.id,
									friend:viewid
								},
								success: (res) => {
									console.log(res)
									this.send(res.data,1)
								},
							})
						})
				    }
				});
			},
	
			
			// 开启音频
			touchstart(e){
				this.vioceBg = false
				console.log('start')
				this.pageY = e.changedTouches[0].pageY
				this.record_time = 0 // 计算时长
				this.timer = setInterval(()=>{
					this.record_time++
					// 音频不超过60s
					if(this.record_time>60){
						this.touchend()
					}
				},1000)
			
				// recorderManager.start();
			},
			// 关闭音频
			touchend(){
				console.log('end')
				clearInterval(this.timer)
				
		// 		recorderManager.stop()
				if(this.record_time>0&&this.vioceBg==false){
					// recorderManager.onStop(res=>{
					// 	// console.log('recorder stop' + JSON.stringify(res));
					// 	let data = {
					// 		vioce:res.tempFilePath,
					// 		time:this.record_time
					// 	}
					// 	this.send(data,2)
					// });
					
					let data = {
						vioce:'http://120.24.182.152:5555/s/static/s/image_files/video_files/2021in2021-10-02-11-08-52is.mp4',
						time:this.record_time
					}
					this.send(data,2)
				}
				this.vioceBg = true
				this.record_time = 0 // 归位
			},
			
			// 终止录音
			touchmove(e){
				// console.log(e.changedTouches[0].clientY)
				let num = e.changedTouches[0].clientY - this.pageY
				if(num<-100){
					this.vioceBg = true
				}
			},
			
			// 定位
			chooselocation(){
				uni.chooseLocation({
				    success:(res)=>{
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						let data = {
							name : res.name,
							address : res.address,
							latitude: res.latitude,
							longitude: res.longitude
						}
						this.send(data,3)
				    }
				});
			},
			
			// 获取页面高度
			getElementStyle(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.submit').boundingClientRect(data => {
				  this.$emit('heights', data.height)
				}).exec();
			}
			
			
		}
	}
</script>

<style lang="less">
	.submit{
		background: rgba(244,244,244,0.96);
		box-shadow: 0px,1px,0px,0px,rgba(0,0,0,0.1);
		width: 100%;
		position: fixed;
		bottom:0;
		z-index: 101;
		padding-bottom: var(--status-bar-height);
		
		.submit-chat{
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: flex-end;
			box-sizing: border-box;
			
			
		
			image{
				width: 56rpx;
				height: 56rpx;
				margin:0 10rpx;
				flex: auto;
				margin-bottom: 15rpx;	
			}
			
			.but{
				flex: auto;
				background-color: #fff;
				border-radius: 10rpx;
				height: 80rpx;
				padding: 15rpx;
				margin: 0 10rpx;
				margin-bottom: 15rpx;	
			}
			
			.record{
				height: 70rpx;
				padding: 0 15rpx;
				line-height: 70rpx;
				text-align: center;
			}
		}
		
		.emoji{
			width: 100%;
			height: 400rpx;
			background: rgba(236,237,238,1);
			box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.1);
			
			.emoji-send{
				width: 240rpx;
				height: 120rpx;
				background-color: rgba(0,0,0,0);
				padding-top: 24rpx;
				position: fixed;
				bottom: 0;
				right: 0;
				display: flex;
				.send{
					width: 120rpx;
					height: 80rpx;
					margin: 0 15rpx 0 5rpx;
					line-height: 80rpx;
					background-color: #f4ea2a;
					font-size: 32rpx;
					text-align: center;
					border-radius: 24rpx;
				}
				
				.send-det{
					width: 120rpx;
					height: 80rpx;
					margin: 0 15rpx 0 5rpx;
					line-height: 80rpx;
					background-color: #fff;
					font-size: 32rpx;
					text-align: center;
					border-radius: 24rpx;
					
					image{
						margin: 15rpx;
						width: 70rpx;
						height: 50rpx;
					}
				}
			}	
		}
		
		.more{
			width: 100%;
			height: 436rpx;
			background: rgba(236,237,238,1);
			box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.1);
			
			.more-list{
				width: 25%;
				text-align: center;
				float: left;
				padding: 20rpx;
				box-sizing: border-box;
				image{
					width: 72rpx;
					height: 72rpx;
					padding: 24rpx;
					border-radius: 24rpx;
					background-color: white;
					
				}
				
				.more-list-title{
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}
		}
		
	}
	
	// 录音时的背景
	.vioce-bg{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		
		.vioce-bg-len{
			position: absolute;
			// 上下 左右 居中
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 600rpx;
			height: 84rpx;
			background: rgba(255,255,255,0.4);
			border-radius: 42rpx;
			margin: auto;
			text-align: center;
			
			.vioce-bg-tiem{
				display: inline-block;
				min-width: 120rpx;
				// max-width: 600rpx;
				width: 120rpx;
				line-height: 84rpx;
				border-radius: 42rpx;
				background-color: #f4ea2a ;
				
			}
		}
		
		.vioce-bg-del{
			position: absolute;
			margin-bottom: var(--status-bar-height) ;
			bottom: 120rpx;
			width: 100%;
			color: #fff;
			text-align: center;
		}
	}
	
	.displaynone{
		display: none;
	}
</style>
